<template>
  <div
    class="box"
    :style="{
      height:
        this.$store.state.system.isFullScreen === false
          ? 'calc(100vh - 60px)'
          : '100vh',
    }"
  >
  <div class="top">
    <div>{{Name}}</div>
  </div>
    <div class="content">
      <!-- 左侧 -->
      <div class="content_left" >
        <div>
          <div><span @click="screen">综合统计</span></div>
          <div><HomePage_FenZhan /></div>
        </div>

        <div>
          <div><span>传感器状态</span></div>
          <div><HomePage_ChanGanQiZhuangTai /></div>
        </div>
        <div>
          <div><span>综合预警状态</span></div>
          <div><HomePage_ZongHeYuJing /></div>
        </div>
      </div>
      <!-- 左侧 -->

      <!-- 中间 -->
      <div class="content_middle">
        <Scalelmg />
      </div>
      <!-- 中间 -->

      <!-- 右侧 -->
      <div class="content_right">
        <div>
          <div><span>统计曲线</span></div>
          <div class="content_right_one">
            <div>顶板离层</div>
            <div><HomePage_QuXianOne /></div>
          </div>
          <div class="content_right_two">
            <div>锚杆应力</div>
            <div><HomePage_QuXianTwo /></div>
          </div>
          <div class="content_right_three">
            <div>锚索应力</div>
            <div><HomePage_QuXianThree /></div>
          </div>
          <div class="content_right_four">
            <div>顶底板位移</div>
            <div><HomePage_QuXianFour /></div>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
    </div>
  </div>
</template>

<script>
import {WbeTitleList} from '../../https/api/user'
import screenfull from "screenfull";
import HomePage_ShiTu from '../ShouYecomponents/HomePage_ShiTu.vue';
import HomePage_ChanGanQiZhuangTai from '../ShouYecomponents/HomePage_ChanGanQiZhuangTai.vue';
import HomePage_ZongHeYuJing from '../ShouYecomponents/HomePage_ZongHeYuJing.vue';
import HomePage_QuXianOne from '../ShouYecomponents/HomePage_QuXianOne.vue';
import HomePage_QuXianTwo from '../ShouYecomponents/HomePage_QuXianTwo.vue';
import HomePage_QuXianThree from '../ShouYecomponents/HomePage_QuXianThree.vue';
import HomePage_QuXianFour from '../ShouYecomponents/HomePage_QuXianFour.vue';
import HomePage_FenZhan from '../ShouYecomponents/HomePage_FenZhan.vue'
import Scalelmg from '../ShouYecomponents/Scalelmg.vue';
export default {
  components: {HomePage_FenZhan, HomePage_ShiTu,HomePage_ChanGanQiZhuangTai,HomePage_ZongHeYuJing,HomePage_QuXianOne,HomePage_QuXianTwo,HomePage_QuXianThree,HomePage_QuXianFour,Scalelmg},
 
  data() 
   {
    return {
      Name:'',
      isFullscreen: false,
      isQuanPing: false,
    };
  },
  mounted() {
    this.Onlist();
  },

  methods: {
    screen() {
      // 如果不允许进入全屏，发出不允许提示
      if (screenfull.isEnabled) screenfull.toggle();
      this.$store.commit("SET_ISFULLSCREEN");
      // console.log(screenfull, this.$store.state.system.isFullScreen);
    },
    Onlist() {
      WbeTitleList().then((res) => {
        console.log('标题',res);
      if (res) {
      

          this.Name = res[0].SystemNames
   
      }else{
        this.Name = ''
      }
      });
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.box {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/ditu.png");
  background-size: 100% 100%;
  padding: 1px;
}
.content {
  width: 100%;
  height: 93%;
  display: flex;
  justify-content: space-between;
  // border: 1px solid red ;
}
.content_left {
  width: 20%;
  height: 98%;
  margin-top: 10px;
  margin-left: 10px;
  cursor: pointer;

  background-color: rgba(9, 16, 32,.5);
  > div:nth-child(1) {
    width: 100%;
    height: 20%;
    // border: 1px dashed salmon;

    > div:nth-child(1) {
      width: 100%;
      height: 25%;
      background-image: url("../../assets/下载.png");
      background-size: 100% 100%;
      position: relative;
      > span {
        color: white;
        position: absolute;
        top: 50%;
        height: 50%;
        transform: translate(30%, -50%);
        font-style: italic;
      }
    }
    > div:nth-child(2) {
      width: 100%;
      height: 80%;
   
    }
  }
  > div:nth-child(2) {
    width: 100%;
    height: 57%;
    // border: 1px dashed salmon;

    > div:nth-child(1) {
      width: 100%;
      height: 10%;
      background-image: url("../../assets/下载.png");
      background-size: 100% 100%;
      position: relative;
      > span {
        color: white;
        position: absolute;
        top: 50%;
        height: 50%;
        transform: translate(30%, -50%);
        font-style: italic;
      }
    }
    > div:nth-child(2) {
      width: 100%;
      height: 90%;
   
    }
  }
  > div:nth-child(3) {
    width: 100%;
    height: 24%;
    // border: 1px dashed salmon;

    > div:nth-child(1) {
      width: 100%;
      height: 20%;
      background-image: url("../../assets/下载.png");
      background-size: 100% 100%;
      position: relative;
      > span {
        color: white;
        position: absolute;
        font-style: italic;
        top: 50%;
        height: 50%;
        transform: translate(30%, -50%);
      }
    }
    > div:nth-child(2) {
      width: 100%;
      height: 80%;
      
    }
  }
}
.content_middle {
  width: 58%;
  height: 98%;
  // border: 1px solid olive;
  margin-top: 10px;
  // background-color: seagreen;
}
.content_right {
  width: 20%;
  height: 98%;
  // border: 1px solid sandybrown;
  background-color: rgba(9, 16, 32,.5);
  margin-top: 10px;
  margin-right: 10px;
  cursor: pointer;

  > div {
    width: 100%;
    height: 100%;
    // border: 1px dashed salmon;

    > div:nth-child(1) {
      width: 100%;
      height: 5%;
      background-image: url("../../assets/下载.png");
      background-size: 100% 100%;
      position: relative;
      > span {
        color: white;
        position: absolute;
        top: 50%;
        height: 50%;
        transform: translate(30%, -50%);
        font-style: italic;
      }
    }
  }
  .content_right_one {
    width: 100%;
    height: 23.75%;


    > div:nth-child(1) {
      width: 100%;
      height: 10%;
      // border: 1px solid red;
      text-align: center;
      font-style: italic;
      color: white;
      font-size: 14px;
    }
    >div:nth-child(2){
      width: 100%;
      height: 90%;
     
    }
  }
  .content_right_two {
    width: 100%;
    height: 23.75%;

    
    > div:nth-child(1) {
      width: 100%;
      height: 10%;
      // border: 1px solid red;
      text-align: center;
      font-style: italic;
      color: white;
      font-size: 14px;
    }
    >div:nth-child(2){
      width: 100%;
      height: 90%;
     
    }
  }
  .content_right_three {
    width: 100%;
    height: 23.75%;

   
    > div:nth-child(1) {
      width: 100%;
      height: 10%;
      // border: 1px solid red;
      text-align: center;
      font-style: italic;
      color: white;
      font-size: 14px;
    }
    >div:nth-child(2){
      width: 100%;
      height: 90%;
      
    }
  }
  .content_right_four {
    width: 100%;
    height: 23.75%;
   
    > div:nth-child(1) {
      width: 100%;
      height: 10%;
      // border: 1px solid red;
      text-align: center;
      font-style: italic;
      color: white;
      font-size: 14px;
    }
    >div:nth-child(2){
      width: 100%;
      height: 90%;
      
    }
  }
}
.top{
  width: 100%;
  height: 50px;
  // border: 1px solid red;
  background-image: url('../../assets//ShowYwTitle (1).png');
  background-size: 100% 180%;
  background-repeat: no-repeat;
  div{
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    color: white;
    font-weight: 900;
  }
}
</style>